<template>
  <div>
    <div class="demo-page-header">
      <a-page-header :ghost="false" title="通行记录列表">
        <template #extra>
          <a-button key="1" type="primary" plain class="sp3">导出</a-button>
        </template>
      </a-page-header>
      <span class="sp"> 搜索：</span>
      <el-input
        class="s-1"
        v-model="find4.name"
        placeholder="请输入人员姓名"
      ></el-input>
      所在项目：
      <el-select
        v-model="find4.item"
        class="m-4"
        size="large"
        placeholder="---请选择---"
      >
        <el-option
          v-for="item in list1"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
      通行人类型：
      <el-select
        v-model="find4.typeOfAccess"
        class="m-4"
        size="large"
        placeholder="---请选择---"
      >
        <el-option
          v-for="item in list2"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
      通行结果：
      <el-select
        v-model="find4.result"
        class="m-4"
        size="large"
        placeholder="---请选择---"
      >
        <el-option
          v-for="item in list3"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
      通行区域：
      <el-select
        v-model="find4.area"
        class="m-4"
        size="large"
        placeholder="---请选择---"
      >
        <el-option
          v-for="item in list4"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
      通行时间：
      <el-select
        v-model="find4.time"
        class="m-4"
        size="large"
        placeholder="---请选择---"
      >
        <el-option
          v-for="item in list5"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
      <el-button class="sp1" @click="getList">搜索</el-button>
      <el-table :data="whiteList" style="width: 100%" highlight-current-row>
        <el-table-column
          fixed
          type="index"
          label="序号"
          width="60"
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="item"
          label="适用项目"
          width="160"
          header-align="center"
          align="center"
        />
        <el-table-column prop="name" label="人员姓名" width="100" />
        <el-table-column
          prop="typeOfAccess"
          label="通行人类型"
          width="160"
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="tel"
          label="联系电话"
          width="120"
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="area"
          label="通行区域"
          width="100"
          header-align="center"
          align="center"
        />

        <el-table-column
          prop="result"
          label="通行结果"
          width="160"
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="time"
          label="通行时间"
          width="200"
          header-align="center"
          align="center"
        />
        <el-table-column label="操作" header-align="center" align="center">
          <template #default="scope">
            <el-button size="small" @click="lookwhite(scope.row.name)"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <Whit v-show="isShow2" @xxxx="changexx" :name="findname"></Whit>
    </div>
  </div>
</template>
 
<script setup lang='ts'>
import { reactive, ref } from "vue";
import service from "../../../utils/service";
import { ElMessage } from "element-plus";
import "element-plus/dist/index.css";
import Whit from "./lookwhite.vue";
interface whiteblackList {
  id: string;
  item: string;
  name: string;
  typeOfAccess: string;
  tel: string;
  area: string;
  result: string;
  time: string;
}
const whiteList = reactive<whiteblackList[]>([]);
const list1 = reactive(["XXX项目1", "XXXXX项目1", "XXXXX项目2"]);
const list2 = reactive(["黑名单", "白名单"]);
const list3 = reactive(["未放行", "已放行"]);
const list4 = reactive(["东门围墙", "西北门"]);
const list5 = reactive([
  "2019-08-16 10:06:19",
  "2019-08-16 10:06:21",
  "2019-08-15 19:12:24",
  "2019-08-15 13:21:12",
  "2019-08-15 09:43:45",
]);
const find4 = reactive<{
  name?: string;
  item?: string;
  typeOfAccess?: string;
  area?: string;
  result?: string;
  time?: string;
}>({});
const getList = () => {
  service({
    url: "blackWhite",
    method: "get",
    params: find4,
  }).then((res) => {
    whiteList.length = 0;
    whiteList.push(...res.data);
    find4.name = null;
    find4.item = null;
    find4.typeOfAccess = null;
    find4.area = null;
    find4.result = null;
    find4.time = null;
  });
};
getList();
const findname = ref("");
const isShow2 = ref(false);
const changexx = () => {
  isShow2.value = false;
};
const lookwhite = (name: string) => {
  isShow2.value = true;
  findname.value = name;
};
</script>

<style scoped>
.demo-page-header :deep(tr:last-child td) {
  padding-bottom: 0;
}
.el-input {
  width: 200px;
  margin-right: 20px;
}

.el-select {
  width: 120px;
  margin-right: 20px;
}
.sp {
  margin-left: 20px;
}
.sp1 {
  background-color: rgba(26, 188, 156, 1);
  color: white;
  border: none;
}
.sp2 {
  background-color: rgba(26, 188, 156, 1);
  color: white;
  border: none;
}
.sp3 {
  background-color: rgb(236, 185, 89);
  color: white;
  border: none;
}
.el-input {
  height: 30px;
}

.m-4 {
  width: 115px;
}
.s-1 {
  width: 200px;
}
.el-pagination {
  float: right;
}
</style>
